boundingClientRect

Returns the rectangle bounds of the element and its position relative to the top-left of the viewport of the current document.

This method can return an empty Rect in the following cases:

• the element is not attached to the DOM tree;
• the element is not visible and has the hidden attribute;
• the CSS style of the element contains display: none; statement.

If the element is attached to the DOM tree and is visible, but it is out of the viewport, this method still returns its bounds.

The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bounding rectangle. This means that the rectangle's boundary edges (top, left, bottom, and right) change their values every time the scrolling position changes (because their values are relative to the viewport and not absolute). If you need the bounding rectangle relative to the top-left corner of the document, just add the current scrolling position to the top and left properties (these can be obtained using window.scrollX and window.scrollY) to get a bounding rectangle which is independent from the current scrolling position.

The origin and size of the returned rectangle are in the device-independent pixels.

Throws